<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery百叶窗动画焦点图切换代码</title>
</head>
<body>

<link rel='stylesheet' href='css/nivo-slider.min.css' type='text/css' />

<script type='text/javascript' src='http://cdn.bootcss.com/jquery/3.3.1/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.nivo.slider.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#slider').nivoSlider({
		effect:'random',	//轮播效果
		slices:15,		
		animSpeed:500,	 //图片切换速度
		pauseTime:3000,		//图片停留时间
		directionNav:false,	//是否显示方向箭头
		controlNav:true,	//是否显示导航控制条
	});
});	
</script>

<div class="theme-default">
	<div id="slider" class="nivoSlider">
		<a href="#"><img src="images/11.jpg" alt="" /></a>
		<a href="#"><img src="images/22.jpg" alt="" /></a>
		<a href="#"><img src="images/31.jpg" alt="" /></a>
		<a href="#"><img src="images/41.jpg" alt="" /></a>      	 	    
	</div> 
</div>


</body>
</html>